uniapp中websocket即时通信用法笔记

2024-06-28 13:53| 来源: 网络整理| 查看: 265

一、在app.vue中编写

1.在标签中编写公共的创建链接封装

//socket连接标识 false未连接，true 连接 let socket_flag=false; var SocketTask = uni.connectSocket({ header:{'Authorization':'Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiIxODI4NTEyMjQyNiIsImNyZWF0ZWQiOjE1ODY1NzMzNjE5ODksImV4cCI6MTU4NzE3ODE2MX0.15CjVJh5Adz1pXTdGkDDiT6HzOwtnOj-y4l6sDVD2eBNO4zFMkPw1ixhfyB8fOx62AF6FTv2z1maNO2i6-FS-g', 'content-type': 'application/json'}, url:'ws://10.0.106.21:8201/mall-portal/socket/9', fail:function(res){ console.log("连接服务器websocket_失败",res); }, success:function(res){ console.log("连接服务器websocket_成功",res); socket_flag = true; }, complete:function(res){ console.log("连接服务器websocket_完成",res); } });

2.还是在app.vue中 export default下将第一步封装连接通信导出为全局方法使用

export default { globalData: { // 导出为全局方法使用 SocketTask: SocketTask }, methods: { } }

3.还是在app.vue中 methods下编写“SocketTask 通信接受消息” 等方法

methods: { ...mapMutations(['login']), onmessage_fun:function(){ console.log("onmessage_fun_______"); SocketTask.onMessage(function(data){ console.log("SocketTask 通信接受消息______",data); uni.$emit('app_test',data); }) }, //中转事件 app_test:function(data){ console.log("监听到了，接受消息的事件回调::ffffffffff::::::") }, openSocketFun:function(){ SocketTask = uni.connectSocket({ header:{'Authorization':'Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiIxODI4NTEyMjQyNiIsImNyZWF0ZWQiOjE1ODY1NzMzNjE5ODksImV4cCI6MTU4NzE3ODE2MX0.15CjVJh5Adz1pXTdGkDDiT6HzOwtnOj-y4l6sDVD2eBNO4zFMkPw1ixhfyB8fOx62AF6FTv2z1maNO2i6-FS-g', 'content-type': 'application/json'}, url:'ws://10.0.106.21:8201/mall-portal/socket/9', fail:function(res){ console.log("连接服务器websocket_失败",res); }, success:function(res){ console.log("连接服务器websocket_成功",res); }, complete:function(res){ console.log("连接服务器websocket_完成",res); } }); getApp().globalData.SocketTask = SocketTask; } },

需要注意的：methods中app_test这个中转事件不写不行，不写就会报错，不执行创建连接通信方法，因为在接受通信信息时候需要$emit触发这个“中间事件”来传递 “信息”；创建连接方法也需要在methods中写一遍 4.还是在app.vue中 onshow下调用methods中的方法等监听信息，

onShow: function() { console.log('App Show') // 判断socket连接标识 false未连接，true 连接 if(!socket_flag){ // 调用methods中方法打开创建连接 this.openSocketFun(); } // 调用全局的创建连接方法执行.onOpen打开连接 SocketTask.onOpen((res)=>{ console.log("socketTask 打开连接: ",res); socket_flag = true;// 修改连接标识为true this_.onmessage_fun(); // 调用接收通信信息的方法接收信息 }); },

5.还是app.vue中的onHide下，在页面离开时

onHide: function() { console.log('App Hide') // 关闭连接 SocketTask.close({ code:1000, success:function(){ console.log("SocketTask close success "); }, fail:function(res){ console.log("SocketTask close fail ",res); } }); // 关闭连接并且修改标识 SocketTask.onClose(function(){ console.log("SocketTask onClose success "); socket_flag = false; }) }, 二、在需要通信的页面编写

1.在标签中编写app.vue中方法的使用，调用

let app= getApp();

2.在onLoad页面加载中，监听app.vue中的全局事件

onLoad(option) { uni.$on('app_test',( data)=> { // 监听app.vue中的全局事件 // 接受到后台发来的对话信息 data var nowDate = new Date(); let newData = JSON.parse(data.data) // 一条数据 let userId = newData.user // id 对方的 let type = newData.type console.log("收到消息_______",data) // 收到信息后进行信息数据类型判断后再显示 }) }, // 页面离开后移除监听 onUnload() { // 移除监听事件 uni.$off('onmessage_fun'); },

3.在页面methods中编写发送信息的方法

// 发送消息 sendMsg(content,type){ // content为要发送的内容 type为要发送的内容类型文字还是图片等 var nowDate = new Date(); // 自己发出的消息 let myId = this.myuid // 自己的id let uid = this.other_partyId // 发给谁的id // let uid = '8' // 发给谁的id let msg = {id:9,toUserName:"大黑哥",face:"/static/img/face.jpg",time:nowDate.getHours()+":"+nowDate.getMinutes(),type:type,msg:content}; this.screenMsg(msg); // 这是一个自己写的判断信息类型的方法 let data = { user: uid, // 发给谁的id type: type, data: content } let dataStr = JSON.stringify(data) // console.log(app.globalData.SocketTask) app.globalData.SocketTask.send({ // 发送消息 data:dataStr, success:function(res){ console.log("SocketTask 发送消息成功", res); }, fail:function(res){ console.log("SocketTask 发送消息失败",res); }, complete() { // 成功或失败都执行 console.log("SocketTask 发送消息完成"); } }) },

到这儿差不多完成了但是细节太多还有bug 需要解决先做个记录

【本文地址】

公司简介

联系我们

uniapp中websocket即时通信 用法笔记

uniapp中websocket即时通信用法笔记